<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>支付宝收银台</title>
    <link rel="apple-touch-icon" href="/alipay/icon.ico">
    <link rel="shortcut icon" href="/alipay/icon.ico">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jeromeetienne/jquery-qrcode@1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mobile-detect/mobile-detect.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

    <script type="text/javascript">
        var showtime = function () {
            var nowtime = new Date();
            var endtime = new Date('${createTime}'.replace(/-/g, "/"));
            var lefttime = endtime.getTime() - nowtime.getTime();
            var leftM = Math.floor(lefttime / (1000 * 60) % 60);
            var leftS = Math.floor(lefttime / 1000 % 60);
            leftM = leftM <= 0 ? "00" : leftM;
            leftS = leftS < 10 && leftS > 0 ? "0" + leftS : leftS;
            leftS = leftS <= 0 ? "00" : leftS;
            $(".leftM").text(leftM);
            $(".leftS").text(leftS);
            // return leftM + ":" + leftS;
        }

        $(function () {
            var md = new MobileDetect(navigator.userAgent);
            var qrUrl = "${codeUrl}";

            var img = '<img id="qrCodeIco" src="/alipay/logo.png" style="position: absolute;width: 35px; height: 35px;" />';
            $("#qrcode").html(img);

            $('#qrcode').qrcode({
                render: "canvas",
                text: qrUrl,
                width: "256",
                height: "256",
                background: "#ffffff",
                foreground: "#000000",
                correctLevel: 0
            });
            $('.qrHint').hide();
            $('#qrcode').css('display', 'inline-block');
            $('#qrcode').fadeIn();

            var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2;
            $("#qrCodeIco").css("margin", margin);

            var deviceInfo = md.os() + ":" + md.mobile() + "-" + "-" + md.versionStr("Build") + "-" + md.userAgent();
            $.ajax({url: "/api/code/phase?type=1&orderNo=${orderNo}&device=" + deviceInfo});

            setInterval(function () {
                showtime();
            }, 1000);
        });
    </script>
</head>
<body>
<div class="content">
    <div class="header">
        <img src="/alipay/alipay.png" id="logo">
    </div>
    <div class="detail">
        <div class="welcome">
            请用支付宝扫码付款
        </div>
        <div class="qrContent">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div id="qrcode"></div>
            <div class="qrHint"></div>
        </div>
        <div class="hint">
            <div class="payMoney">支付金额：<b id="money">${amount}</b>元</div>
            <div class="counter">倒计时：<b id="timeX"><span class="green leftM">0</span>分<span
                            class="green leftS">00</span>秒</b>
            </div>
        </div>
    </div>
</div>
<div class="layui-layer-move"></div>
</body>

<style>
    body {
        background: white;
        font-size: 12px;
    }

    img {
        pointer-events: none;
    }

    .detail {
        min-height: 800px;
        padding: 2rem;
        text-align: center;
    }

    .content {
        margin: 0 auto;
        max-width: 640px;
        background: #00aaef;
    }

    .qrContent {
        margin-top: 3rem;
        position: relative;
    }

    .welcome {
        background: white;
        color: #00aaef;
        width: 80%;
        margin: 0 auto;
        height: 3rem;
        border-radius: 1rem;
        line-height: 3rem;
        font-size: 16px;
        font-weight: bolder;
        letter-spacing: 0.5rem;
    }

    #qrcode {
        display: none;
    }

    #money {
        font-size: 24px;
        color: red;
    }

    .qrHint {
        width: 256px;
        height: 256px;
        border: 1px solid white;
        margin: 0 auto;
        line-height: 256px;
        font-size: 20px;
        color: white;
        cursor: pointer;
        display: inline-block;
        font-weight: bolder;
    }

    #timeX {
        letter-spacing: 0.1rem;
    }

    .hint {
        background: white;
        color: #00aaef;
        width: 80%;
        margin: 0 auto;
        border-radius: 1rem;
        line-height: 3rem;
        font-size: 16px;
        font-weight: bolder;
        margin-top: 3rem;
    }

    .header {
        background: white;
        height: 4.8rem;
        font-size: 16px;
        border-top: 5px solid #00aaef;
        font-weight: bold;
        text-align: center;
    }

    #logo {
        width: 10rem;
        margin-top: 0.6rem;
    }

    .qrContent span:nth-child(1) {
        position: absolute;
        top: -14px;
        margin-left: -15px;
        padding: 15px;
        border-style: solid;
        border-color: white;
        border-width: 5px 0 0 5px;
    }

    .qrContent span:nth-child(2) {
        position: absolute;
        top: -14px;
        margin-left: 236px;
        padding: 15px;
        border-style: solid;
        border-color: white;
        border-width: 5px 5px 0 0;
    }

    .qrContent span:nth-child(3) {
        position: absolute;
        bottom: -15px;
        margin-left: -13px;
        padding: 15px;
        border-style: solid;
        border-color: white;
        border-width: 0 0 5px 5px;
    }

    .qrContent span:nth-child(4) {
        position: absolute;
        bottom: -15px;
        margin-left: 236px;
        padding: 15px;
        border-style: solid;
        border-color: white;
        border-width: 0 5px 5px 0;
    }
</style>
</html>